<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas教程</title>
</head>

<style>
    .header-box {
        display: grid;
        grid-template-columns: repeat(auto-fill, 200px);
        grid-row-gap: 20px;
        grid-column-gap: 20px;
        margin: 0 0 20px 0;
    }

    .header-box a {
        text-decoration: none;
        color: rgb(82, 78, 78);
        border-radius: 6px;
        width: 200px;
        height: 60px;

        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #cddc39;
    }

    .main-demo {
        display: grid;
        grid-template-columns: repeat(auto-fill, 200px);
        grid-row-gap: 20px;
        grid-column-gap: 20px;
    }

    .main-demo canvas {
        border: 1px solid rgb(238, 237, 237);
    }
</style>

<body>
    <div class="header-box">
        <a href="./canvas/weiqi.html">五子棋</a>
        <a href="./canvas/moon.html">月球绕地球转</a>
    </div>
    <div class="main-demo">
        <canvas width="200" height="200" id="canvas1"></canvas>
        <canvas width="200" height="200" id="canvas2"></canvas>
        <canvas width="200" height="200" id="canvas3"></canvas>
        <canvas width="200" height="200" id="canvas4"></canvas>
        <canvas width="200" height="200" id="canvas5"></canvas>
        <canvas width="200" height="200" id="canvas6"></canvas>
        <canvas width="200" height="200" id="canvas7"></canvas>
        <canvas width="200" height="200" id="canvas8"></canvas>
        <canvas width="200" height="200" id="canvas9"></canvas>
        <canvas width="200" height="200" id="canvas10"></canvas>
        <canvas width="200" height="200" id="canvas11"></canvas>
        <canvas width="200" height="200" id="canvas12"></canvas>
    </div>
</body>
<script>
    //https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D
    //矩形==================================================
    let canvas1 = document.getElementById('canvas1')
    let c1 = canvas1.getContext('2d')
    c1.fillRect(0, 0, 100, 100)

    //画线条==================================================
    let canvas2 = document.getElementById('canvas2')
    let c2 = canvas2.getContext('2d')
    c2.moveTo(10, 10)
    c2.lineTo(100, 100)
    c2.lineWidth = 5
    //普通色值
    c2.strokeStyle = '#0c0'
    c2.stroke()

    //重新开始画图的话，需要断掉上一个节点，用beginpath  closepath标记
    c2.beginPath()
    //线性渐变
    //x1y1 x2y2渐变起始点坐标
    let gradient = c2.createLinearGradient(0, 0, 200, 200)
    gradient.addColorStop(0, 'red')
    gradient.addColorStop(1, 'blue')
    c2.strokeStyle = gradient
    //修改线条转折点 miter round bevel
    c2.lineJoin = 'round'
    //修改线条首尾点 butt round square
    c2.lineCap = 'round'
    c2.moveTo(120, 20)
    c2.lineTo(180, 160)
    c2.stroke()
    c2.closePath()

    //==================================================
    let canvas3 = document.getElementById('canvas3')
    let c3 = canvas3.getContext('2d')
    //径向渐变
    let gradient3 = c3.createRadialGradient(110, 110, 0, 110, 110, 60)
    gradient3.addColorStop(0, 'red')
    gradient3.addColorStop(1, 'pink')
    c3.fillStyle = gradient3
    c3.fillRect(50, 50, 120, 120)

    //==================================================
    let canvas4 = document.getElementById('canvas4')
    let c4 = canvas4.getContext('2d')
    // 锥形渐变 第一个参数是弧度值
    let gradient4 = c4.createConicGradient(-45 * (Math.PI / 180), 80, 80)
    gradient4.addColorStop(0, 'red')
    gradient4.addColorStop(.5, 'blue')
    gradient4.addColorStop(1, 'red')
    c4.fillStyle = gradient4
    c4.fillRect(0, 0, 160, 160)

    //==================================================
    let canvas5 = document.getElementById('canvas5')
    let c5 = canvas5.getContext('2d')
    //画圆弧 xyr 圆心坐标和半径，开始弧度，结束弧度，是否是逆时针【默认false顺时针】
    c5.arc(100, 100, 80, 0, 180 * (Math.PI / 180))
    // c5.stroke()
    //可以使用fill填充 样式同理：fillStyle
    c5.fill()
    //画椭圆 xy rx ry 旋转角度 开始弧度 结束弧度 是否是逆时针
    c5.beginPath()
    c5.ellipse(100, 60, 60, 40, 0, 0, 360 * (Math.PI / 180))
    c5.stroke()
    c5.closePath()

    //贝塞尔曲线==================================================
    let canvas6 = document.getElementById('canvas6')
    let c6 = canvas6.getContext('2d')
    //二阶贝塞尔曲线
    c6.moveTo(10, 10)
    c6.quadraticCurveTo(30, 100, 60, 60)
    c6.stroke()

    c6.beginPath()
    c6.moveTo(80, 20)
    c6.bezierCurveTo(70, 100, 180, 50, 180, 180)
    c6.stroke()
    c6.closePath()


    //画圆弧 ==================================================
    let canvas7 = document.getElementById('canvas7')
    let c7 = canvas7.getContext('2d')
    c7.moveTo(20, 20)
    c7.arcTo(180, 120, 100, 180, 60)
    c7.stroke()

    //画图 ==================================================
    let canvas8 = document.getElementById('canvas8')
    let c8 = canvas8.getContext('2d')
    let img = new Image()
    img.src = './assets/girl.png'
    img.onload = function () {
        //绘制坐标，按照原图大小绘制
        // c8.drawImage(img, 10, 10)

        //绘制坐标，图片大小
        // c8.drawImage(img, 10, 10, img.width / 10, img.height / 10)

        //裁切的坐标，裁切的大小，绘制的坐标，绘制的大小
        c8.drawImage(img, 140, 200, 100, 100, 10, 10, 150, 150)
    }


    //文字 ==================================================
    let canvas9 = document.getElementById('canvas9')
    let c9 = canvas9.getContext('2d')
    c9.font = '700 30px Arial'
    c9.textAlign = 'left' //left right center start end
    //文字  文字左下角坐标 [maxwidth]
    c9.fillText('你好呀，我的朋友', 0, 50)

    c9.strokeText('你好呀，我的朋友', 0, 150, 180)


    //滤镜 ==================================================
    let canvas10 = document.getElementById('canvas10')
    let c10 = canvas10.getContext('2d')
    c10.filter = 'blur(2px)' //模糊
    // c10.filter = 'opacity(50%)' //透明度
    // c10.filter = 'grayscale(100%)' //灰度
    // c10.filter = 'brightness(40%)' //亮度
    // c10.filter = 'contrast(150%)' //对比度
    // c10.filter = 'hue-rotate(100deg)' //颜色旋转
    // c10.filter = 'invert(100%)' //反相
    // c10.filter = 'saturate(30%)' //饱和度
    // c10.filter = 'sepia(100%)' //深褐色
    let img10 = new Image()
    img10.src = './assets/girl.png'
    img10.onload = function () {
        c10.drawImage(img10, 10, 10, img10.width / 5, img10.height / 5)
    }

    //变换 ==================================================
    let canvas11 = document.getElementById('canvas11')
    let c11 = canvas11.getContext('2d')
    //变换都是基于原点的操作
    c11.translate(50, 50)
    //旋转也是基于原点，只不过上面把原点变换到50 50 所以这边就是基于50 50
    c11.rotate(45 * (Math.PI / 180))
    //缩放
    c11.scale(1.2, 0.8)
    c11.fillRect(0, 0, 80, 80)

    //动画 ==================================================
    let canvas12 = document.getElementById('canvas12')
    let c12 = canvas12.getContext('2d')
    c12.fillStyle = 'skyblue'
    width = 0
    function loop() {
        //随机颜色
        // c12.fillStyle = '#' + Math.random().toString(16).substring(2, 8)
        //先清空画布 再绘制方形
        c12.clearRect(0, 0, canvas12.width, canvas12.height)
        c12.fillRect(0, 50, width++, 100)
        width = width % canvas12.width
        requestAnimationFrame(loop)
    }
    //每隔一小段时间运行一次，比定时器高效
    requestAnimationFrame(loop)
</script>

</html>